<script setup>
import { Image } from "vant";
import { defineProps } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const { item } = defineProps({
  item: {
    type: Object,
  },
});
const jumpToDetail = () => {
  router.push("/home/info?product_id="+item.product_id);
};
</script>

<template>
  <div @click="jumpToDetail" data-v-02bb6fe1="" data-v-1a8e2864="" class="product-item-block-wrap">
    <div data-v-02bb6fe1="" class="product-avatar">
      <div data-v-02bb6fe1="" class="van-image product-image">
        <img
          :src="item.product_img"
          class="van-image__img"
        /><!----><!---->
      </div>
      <div data-v-02bb6fe1="" class="product-status">
        <div data-v-02bb6fe1="" class="scroll-wrap" :class="{'move-animi':scrollTextArr.length>1}">
          <div v-for="(item,index) in scrollTextArr" :key="index" data-v-02bb6fe1="" class="text">{{item}}</div>
        </div>
      </div>
    </div>
    <div data-v-02bb6fe1="" data-v-b488697a="" class="product-base">
      <div data-v-02bb6fe1="" data-v-b488697a="" class="product-title">
        <div data-v-02bb6fe1="" data-v-b488697a="" class="product-text">
          {{item.product_name}}
        </div>
        <div data-v-02bb6fe1="" data-v-b488697a="" class="product-type">
          {{item.profit_data}}
        </div>
      </div>
      <div data-v-02bb6fe1="" data-v-b488697a="" class="product-desc">
        {{item.price_type_desc}}{{item.price}}元
      </div>
      <div data-v-02bb6fe1="" data-v-b488697a="" class="product-info">
        <!-- <div data-v-02bb6fe1="" data-v-b488697a="" class="product-data">
          <div data-v-02bb6fe1="" data-v-b488697a="" class="product-num">{{item.product_maximum}}</div>
          <div data-v-02bb6fe1="" data-v-b488697a="" class="product-text">
            最高额度(元)
          </div>
        </div> -->
        <div data-v-02bb6fe1="" data-v-b488697a="" class="product-data">
          <div data-v-02bb6fe1="" data-v-b488697a="" class="product-num">
            {{item.longest_date}}
          </div>
          <div data-v-02bb6fe1="" data-v-b488697a="" class="product-text">
            可借款期限(月)
          </div>
        </div>
        <div data-v-02bb6fe1="" data-v-b488697a="" class="product-data">
          <div data-v-02bb6fe1="" data-v-b488697a="" class="product-num">
            {{item.most_share_money ? item.most_share_money : item.pase_rate}}
          </div>
          <div data-v-02bb6fe1="" data-v-b488697a="" class="product-text">
            单笔最高佣金
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    export default {
        props:['item'],
        computed:{
            scrollTextArr(){
                let text = this.item.act_label_desc
                let arr = [];
                for(let i = 0;i<text.length;i+=4){
                    arr.push(text.substr(i,i+4))
                }
                return arr;
            }
        }
    }
</script>
<style scoped>
.product-item-block-wrap {
    background-color: #fff;
    border-radius: .213333rem;
    margin: .266667rem auto 0;
    padding: .32rem 0;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative
}

.move-animi {
    animation: move-02bb6fe1 5s linear infinite
}

@keyframes move-02bb6fe1 {
    0% {
        transform: translateY(0)
    }

    10% {
        transform: translateY(-17PX)
    }

    50% {
        transform: translateY(-17PX)
    }

    60% {
        transform: translateY(0)
    }

    to {
        transform: translateY(0)
    }
}

.product-image {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .133333rem;
    overflow: hidden;
    margin-bottom: .2rem
}

.product-item-block-wrap .product-avatar {
    margin-left: .32rem;
    display: flex;
    flex-direction: column;
    align-items: center
}

.product-item-block-wrap .product-avatar .product-status {
    width: 1.6rem;
    height: .453333rem;
    font-size: .32rem;
    font-weight: 500;
    line-height: .453333rem;
    text-align: center;
    background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-tag1.png) 50%/100% 100% no-repeat;
    color: #fff;
    position: relative;
    overflow: hidden
}

.product-item-block-wrap .product-avatar .product-status .scroll-wrap {
    width: .133333rem;
    height: .906667rem;
    text-align: center;
    position: absolute;
    left: .133333rem;
    top: 0
}

.product-item-block-wrap .product-base {
    margin-left: .32rem;
    width: calc(100% - 1.92rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.product-item-block-wrap .product-base .product-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.product-item-block-wrap .product-base .product-title .product-text {
    font-size: .426667rem;
    color: #333;
    font-weight: 700
}

.product-item-block-wrap .product-base .product-title .product-type {
    margin-left: auto;
    margin-right: .4rem;
    font-size: .373333rem;
    color: #1677ff;
    font-weight: 500
}

.product-item-block-wrap .product-base .product-desc {
    margin-top: .066667rem;
    color: #fc5e10;
    font-size: .32rem;
    font-weight: 500
}

.product-item-block-wrap .product-base .product-info {
    width: calc(100% - .4rem);
    margin-top: .266667rem;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.product-item-block-wrap .product-base .product-info .product-data {
    flex:1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-self: center
}

.product-item-block-wrap .product-base .product-info .product-data .product-num {
    font-size: .426667rem;
    color: #f01c06;
    font-weight: 700
}

.product-item-block-wrap .product-base .product-info .product-data .product-text {
    font-size: .266667rem;
    color: #666;
    font-weight: 400
}

.product-item-block-wrap .product-avatar .product-status .scroll-wrap {
    width: 1.333333rem;
    height: .906667rem;
    text-align: center;
    position: absolute;
    left: .133333rem;
    top: 0
}

.product-item-grad[data-v-d680b559] {
    width: 2.96rem;
    height: 3.786667rem;
    border-radius: .133333rem;
    margin-bottom: .2rem;
    background-color: #fff;
    box-shadow: 0 0 .173333rem .053333rem #bbbbbb80;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative
}

.product-item-grad .image[data-v-d680b559] {
    width: 1.333333rem;
    height: 1.333333rem;
    border-radius: .106667rem;
    margin-top: .613333rem;
    overflow: hidden
}

.product-item-grad .name[data-v-d680b559] {
    font-size: .346667rem;
    color: #333;
    font-weight: 700;
    margin-top: .16rem
}

.move-animi[data-v-d680b559] {
    animation: move-d680b559 5s linear infinite
}

@keyframes move-d680b559 {
    0% {
        transform: translateY(0)
    }

    10% {
        transform: translateY(-17PX)
    }

    50% {
        transform: translateY(-17PX)
    }

    60% {
        transform: translateY(0)
    }

    to {
        transform: translateY(0)
    }
}

.product-item-grad .tag[data-v-d680b559] {
    padding: 0 .133333rem;
    height: .426667rem;
    font-size: .266667rem;
    color: #666;
    font-weight: 400;
    text-align: center;
    line-height: .426667rem;
    margin-top: .12rem;
    background-color: #f5f5f5
}

.product-item-grad .desc[data-v-d680b559] {
    font-size: .266667rem;
    color: #fc5e10;
    font-weight: 500;
    margin-top: .16rem;
    text-align: center
}

.product-item-grad .status[data-v-d680b559] {
    width: 1.466667rem;
    height: .453333rem;
    line-height: .453333rem;
    text-align: center;
    font-size: .32rem;
    color: #fff;
    font-weight: 500;
    position: absolute;
    left: 0;
    top: 0;
    background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-tag2.png) 50%/100% 100% no-repeat;
    overflow: hidden
}

.product-item-grad[data-v-d680b559] {
    margin-left: .24rem
}

.types-wrap[data-v-1a8e2864] {
    display: flex
}

.types-wrap-white[data-v-1a8e2864] {
    background-color: #fff;
    padding: .266667rem 0;
    border-top-left-radius: .32rem;
    border-top-right-radius: .32rem;
    min-height: 1.813333rem
}

.home[data-v-1a8e2864] {
    background: url(/assets/bg-user.png) 0 -2rem/10rem 5.6rem no-repeat;
    background-color: #f5f3f3;
    min-height: 100vh
}

.type-name[data-v-1a8e2864] {
    width: 2.053333rem;
    display: flex;
    justify-content: center;
    font-size: .346667rem;
    height: .64rem;
    align-items: center;
    color: #1677ff;
    font-weight: 700
}

.types[data-v-1a8e2864] {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 2.053333rem)
}

.type[data-v-1a8e2864] {
    font-size: .346667rem;
    color: #333;
    height: .64rem;
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center
}

.type.active[data-v-1a8e2864] {
    background-color: #1677ff;
    color: #fff;
    font-weight: 700;
    border-radius: .466667rem
}

.product-list-block-wrap[data-v-1a8e2864] {
    width: 9.36rem;
    margin: .32rem auto 0
}

.product-list-grad-wrap[data-v-1a8e2864] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    margin: .32rem auto 0;
    box-sizing: border-box;
    padding: 0 .32rem 0 .08rem
}

.tool[data-v-1a8e2864] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: .213333rem
}

.tool .change[data-v-1a8e2864] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
    margin-right: .32rem
}

.tool .change .text[data-v-1a8e2864] {
    font-size: .373333rem;
    color: #666;
    font-weight: 400
}

.tool .change .icon[data-v-1a8e2864] {
    width: .346667rem;
    height: .346667rem;
    margin-left: .16rem
}

.tool .change .grad[data-v-1a8e2864] {
    background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-change1.png) 50%/100% 100% no-repeat
}

.tool .change .block[data-v-1a8e2864] {
    background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-change.png) 50%/100% 100% no-repeat
}
</style>
